/*
 * @Description: 计划天窗
 * @Author: Zzt
 * @Date: 2022-08-12 09:58:09
 * @LastEditTime: 2022-08-16 10:18:07
 */
import { Form, FormInstance, Tabs } from 'antd';
import BackupTypePane from './FormPlans/BackupTypePane';
import ScopePane from './FormPlans/ScopePane';
import TriggerPane from './FormPlans/TriggerPane';

const { TabPane } = Tabs;

interface TransferFormProps {
  data?: any;
  form: FormInstance;
  visible: boolean;
  closeDialog: any;
  active: any;
}

const activated = [
  { id: 0, ac: 'range' },
  { id: 1, ac: 'mode' },
  { id: 2, ac: 'strategy' }
];

const PlanForm = (props: TransferFormProps) => {
  const { form, active } = props;

  /* 调整tab的选择 */
  const onChange = (value: any) => {
    console.log(value);
  };

  const onFinish = (event: any) => {
    console.log(event);
  };

  return (
    <>
      <Tabs activeKey={activated[active].ac} onChange={onChange} type="card">
        <TabPane tab="备份范围" key="range">
          <Form form={form} labelCol={{ span: 5 }} wrapperCol={{ span: 20 }} onFinish={onFinish}>
            <ScopePane form={form} />
          </Form>
        </TabPane>
        <TabPane tab="备份方式" key="mode">
          <Form form={form} labelCol={{ span: 5 }} wrapperCol={{ span: 20 }} onFinish={onFinish}>
            <BackupTypePane form={form} />
          </Form>
        </TabPane>
        <TabPane tab="触发策略" key="strategy">
          <Form form={form} labelCol={{ span: 5 }} wrapperCol={{ span: 20 }} onFinish={onFinish}>
            <TriggerPane form={form} />
          </Form>
        </TabPane>
      </Tabs>
    </>
  );
};
export default PlanForm;
